<template>
    <div class="">
        <nav>
          <a href="#/" class="fa fa-angle-left"></a>
          消息
        </nav>
        
        <div class="content">
            <ul>
                <li v-for="(shop,index) in shops">
                    <!--{{shop}}-->
                    <p>用户: <span>{{shop.authorName}}</span><strong @click="isShow = !isShow">查看详情</strong></p>
                    <p>评论了商品: <span>{{shop.sname}}</span><strong @click="pingshan(index)">删除</strong></p>
                    <transition name="slide">
                    <div  v-if="isShow" class="xiang">
                        <p>评论内容: {{shop.content}}</p>
                        <div class="img" v-for="item in shop.commentImages">
                            <img :src="`http://localhost:2222/images/photos/${item}`" alt="">
                        </div>
                    </div>
                    </transition>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
     import axios from 'axios'
    import { Tabbar, TabbarItem, Group, Cell } from 'vux'
    export default {
        components: {
            Tabbar,
            TabbarItem,
            Group,
            Cell
        },
        data() {
            return {
                datas:'',
                shops:'',
                isShow:false,
            }
        },
        mounted:function(){
            var that = this;
            axios.get('los/xiaoxi').then(function(data){
                that.shops = data.data.message;
            
            }).catch(function(err){
                console.log(err);
            })
        },
        methods:{
            pingshan:function(index){
                axios.get('los/pingshan',{ins:index})
                .then(function(data){
                    location.reload();
                }).catch(function(err){
                })
            }
        }
    }
</script>
<style scoped>
    .slide-enter{
			height: 0 !important;
        }
        .slide-enter-active {
            transition: all 0.7s;
        }
        .slide-leave-active{ 
            transition: all 0.7s;
        }
        .slide-leave-to{
			height: 0px !important;
        }
    li{
        box-shadow: 0 0 6px 0px #cc0100;
        padding: 10px;
        font-size: 14px;
        margin: 10px;
    }
    li p{
        line-height: 25px;
    }
    li p span{
        color: #cc0100;
        margin-left: 10px;
    }
    .haha{
        padding: 2px 20px;
    }
    strong{
        float: right;
        color: #cc0100;
    }
    .xiang{
        position: relative;
        border: 1px solid #ccc;
        padding: 10px;
        height: 122px;
        overflow: hidden;
    }
    .xiang p{
        line-height: 30px;
        padding-bottom: 10px;
    }
    .xiang .img{
        width: 60px;
        height: 60px;
        box-shadow: 0 0 2px 1px #FA8072;
    }
    .xiang .img img{
        width: 100%;
    }
    .content{
        margin-top: 60px;
    }
   nav{
     line-height: 45px;
     text-align: center;
     border-bottom: 1px solid #ddd;
     position: fixed;
     z-index: 666;
     top: 0;
     left: 0;
     right: 0;
     background: #FA8072;
     color: #fff;
 }
 nav > a{
    position: absolute;
    left: 20px;
    font-size: 30px;
    top: 6px;
    color: #fff;
 }
  
    
</style>